<template>
  <div>
    <!-- 添加或修改资产清单表对话框 -->
    <el-dialog v-model="openFlag" title="盘点" width="80%" append-to-body>
      <div class="lr-layout">
        <div class="left">
          <el-form ref="form" :model="formData" label-width="100">
            <el-row>
              <el-col :span="24">
                <el-form-item label="盘点后所在仓库" prop="warehouseId">
                  <warehouse-select v-model="formData.warehouseId"></warehouse-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="盘点后所在位置" prop="location">
                  <el-input v-model="formData.location"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="盘点后使用人" prop="userId">
                  <user-select v-model="formData.userId"></user-select>

                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="盘点结果" prop="result">
                  <el-select v-model="formData.result">
                    <el-option label="正常" :value="1"></el-option>
                    <el-option label="盘亏" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>
        <div class="right">
          <vxe-table :data="list">
            <vxe-column field="number" width="120" title="盘点图片" align="center">
              <template #default="{ row }">
                <image-show :img-url="row.imgUrlInventory"></image-show>
              </template>
            </vxe-column>
            <vxe-column field="number" width="120" title="资产图片" align="center">
              <template #default="{ row }">
                <image-show :img-url="row.imgUrl"></image-show>
              </template>
            </vxe-column>
            <vxe-column title="名称" field="name"></vxe-column>
            <vxe-column title="品牌" field="brand"></vxe-column>
            <vxe-column title="型号" field="model"></vxe-column>
            <vxe-column title="操作" align="center" fixed="right">
              <template  #default="{ row }">
                <el-upload class="avatar-uploader" :headers="headersObj" :action="uploadUrl" :show-file-list="false"
                           :on-success="handleUploadSuccess" :before-upload="beforeUpload">
                  <el-button link type="primary"
                             @click="handlePhoto(row)"
                  >盘点图片</el-button>
                </el-upload>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>



      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </el-row>
      </div>
    </el-dialog>

  </div>
</template>

<script setup>

import api from "./api.js";
import WarehouseSelect from "@/components/Warehouse/WarehouseSelect.vue";
import ImageShow from "@/components/Common/ImageShow.vue";
import {getToken} from "@/utils/auth.js";
import UserSelect from "@/components/User/UserSelect.vue";

const emit = defineEmits(["sub"]);

const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/uploadImg';


const headersObj = {
  'Authorization': 'Bearer ' + getToken()
}

const openFlag = ref(false);
const list = ref([]);
let currentPhotoRow = null;

const formDataInit = {
  warehouseId: null,
  location: null,
  userId: null,
  result: null
}

// 表单参数
const formData = reactive({ ...formDataInit });

function reset() {
  list.value = [];
  Object.assign(formData, formDataInit)
}

function open(rows) {
  openFlag.value = true;
  reset();
  list.value = rows;
}

function close() {
  openFlag.value = false;
}

function handlePhoto(row) {
  currentPhotoRow = row;
}

function handleUploadSuccess(response) {
  currentPhotoRow.imgUrlInventory = response.fileName;
}

function beforeUpload(rawFile) {

  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    proxy.$modal.alert('请上传图片格式!');
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    proxy.$modal.alert('图片不能超过2M!');
    return false
  }
  return true
}

/** 提交按钮 */
function save() {

  api.inventory({
    formData: formData,
    items: list.value
  }).then(response => {
    emit("sub");
    close();
  });
}

defineExpose({
  open
})


</script>
<style scoped lang="scss">

.left {
  width: 500px;
  padding: 15px;
}

</style>

